<template>
  <q-charts :charts="charts" :title="title" classes="col no-padding no-shadow"></q-charts>
</template>
<script setup>
import { adaptFontSize } from 'src/utils/utils.js'
import { computed } from 'vue'

const props = defineProps({
  colors: { type: Array, default: () => ['#7A79FF', '#F4DF58'] }, header: { type: String, default: 'H' }
})
const title = computed(() => {
  const size = adaptFontSize(14), { header = '' } = props
  return {
    text: `{title|${header}}`, position: 'center', top: 'middle', left: 'center',
    textStyle: { rich: { title: { fontSize: size * 1.4, fontWeight: '600', padding: 0 } } }
  }
})
const charts = computed(() => {
  const { colors = [] } = props
  return [{
    type: 'pie', radius: ['60%', '90%'], showEmptyCircle: true, emptyCircleStyle: {
      color: colors[0]
    }
  }, {
    type: 'pie', radius: ['60%', '90%'], itemStyle: { borderRadius: 50 }, silent: true,
    labelLine: { show: false },
    data: [{
      value: 50, itemStyle: {
        color: {
          x: 0, y: 1, x2: 0, y2: 0, type: 'linear', colorStops: [{
            offset: 0, color: colors[1]
          }, {
            offset: 1, color: colors[0]
          }]
        }
      }
    }, { value: 45, itemStyle: { color: 'transparent' } }]
  }]
})
</script>
<style lang="scss" scoped>
.q-charts:deep(svg) {
  cursor: pointer;
}
</style>